<template>
    <el-dialog v-model="dialogFormVisible" title="表格配置">
        <div class="fun">
            <el-button :disabled="disabled" type="primary" plain
                @click="fieldData.tableFields.push({ ...field })">添加字段</el-button>
        </div>
        <div class="table">
            <el-table border empty-text="暂无数据" :data="fieldData.tableFields"
                :header-cell-style="{ background: 'var(--table-title-color)', color: 'var(--table-title-font-color)' }">
                <el-table-column prop="fieldCnNm" label="表头名" min-width="150">
                    <template #default="{ row }">
                        <el-input :disabled="disabled" clearable v-model="row.fieldCnNm" placeholder="请输入表头名">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="fieldEnNm" label="字段名" min-width="150">
                    <template #default="{ row }">
                        <el-input :disabled="disabled" clearable v-model="row.fieldEnNm" placeholder="请输入字段名">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="fieldType" label="字段类型" min-width="150">
                    <template #default="{ row }">
                        <el-select :disabled="disabled" clearable v-model="row.fieldType" placeholder="请选择字段类型">
                            <el-option label="普通文本" value="0" />
                            <el-option label="数字" value="2" />
                            <el-option label="日期" value="3" />
                            <el-option label="时间" value="4" />
                            <el-option label="时间日期" value="5" />
                            <el-option label="选择器" value="8" />
                            <el-option label="单选框" value="9" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="fieldConf" label="字段配置" min-width="150">
                    <template #default="{ row }">
                        <el-input :disabled="disabled" v-if="row.fieldType === '2'" clearable v-model="row.fieldConf"
                            placeholder="请输入单位">
                        </el-input>
                        <el-input :disabled="disabled" v-else-if="row.fieldType === '8' || row.fieldType === '9'"
                            clearable v-model="row.fieldConf" placeholder="请输入字典编码">
                        </el-input>
                        <el-input v-else disabled placeholder="无需配置">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="modifyFlag" label="允许修改" min-width="150">
                    <template #default="{ row }">
                        <el-select :disabled="disabled" clearable v-model="row.modifyFlag" placeholder="请选择是否允许修改">
                            <el-option label="是" value="0" />
                            <el-option label="否" value="1" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="requiredFlag" label="是否必输项" min-width="150">
                    <template #default="{ row }">
                        <el-select :disabled="disabled" clearable v-model="row.requiredFlag" placeholder="请选择是否必输项">
                            <el-option label="是" value="0" />
                            <el-option label="否" value="1" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" min-width="150">
                    <template #default="{ row }">
                        <el-input-number :disabled="disabled" v-model="row.sort" :min="0" :max="999" size="default" />
                    </template>
                </el-table-column>
                <el-table-column :fixed="$isMobile() ? false : 'right'" label="操作" width="80">
                    <template #default="scope">
                        <el-button :disabled="disabled" text type="primary" size="small"
                            @click="fieldData.tableFields.splice(scope.$index, 1)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">返回</el-button>
                <el-button type="primary" @click="submit">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    }
})

const field = {
    fieldEnNm: '',
    fieldCnNm: '',
    fieldType: null,
    modifyFlag: '1',
    requiredFlag: '0',
    sort: 0,
    tableFlag: '0'
}
const fieldData = ref({})
const dialogFormVisible = ref(false)
const init = (field) => {
    fieldData.value = JSON.parse(JSON.stringify(field))
    dialogFormVisible.value = true
}

const emit = defineEmits(['sendData']);
const submit = () => {
    judgeTable()
    emit('sendData', fieldData.value)
    dialogFormVisible.value = false
}

const judgeTable = () => {
    fieldData.value.tableFields.forEach((item, index) => {
        if (!item.fieldCnNm || !item.fieldEnNm || !item.fieldType) {
            ElMessage.warning(`请把第${index + 1}行填写完整!`)
            throw new Error()
        } else if ((item.fieldType === '8' || item.fieldType === '9') && !item.fieldConf) {
            ElMessage.warning(`请输入第${index + 1}行字典编码!`)
            throw new Error()
        }
    })
}

defineExpose({
    init
})

</script>